<template>
  <div>
    <page-layout>
      <a-row :gutter="[10, 10]">
        <a-col :span="8">
          <a-card :title="t('welcome')" style="height: 320px">
            <a-result :title="t('welcome')+',' + userInfo + '!'">
              <template #icon>
                <smile-twoTone />
              </template>
            </a-result>
          </a-card>
        </a-col>

        <a-col :span="16">
          <a-card :title="t('quick menu')" style="height: 320px">
            <a-row :gutter="[10, 10]">
              <a-col :span="8">
                <quick
                  color="rgb(255, 214, 102)"
                  icon="UserOutlined"
                  :title="t('adminadmin')"
                  @click="go('/admin/admin')"
                >
                </quick>
              </a-col>
              <a-col :span="8">
                <quick
                  color="rgb(179, 127, 235)"
                  icon="AlertOutlined"
                  :title="t('EmsAlarmRecord')"
                  @click="go('/ems/alarm_record')"
                >
                </quick>
              </a-col>
              <a-col :span="8">
                <quick
                  color="rgb(255, 156, 110)"
                  icon="AimOutlined"
                  :title="t('EmsAcqPoints')"
                  @click="go('/ems/acq_points')"
                >
                </quick>
              </a-col>
              <a-col :span="8">
                <quick
                  color="rgb(105, 192, 255)"
                  icon="DatabaseOutlined"
                  :title="t('EmsAcqClient')"
                  @click="go('/ems/acq_client')"
                >
                </quick>
              </a-col>
              <a-col :span="8">
                <quick
                  color="rgb(255, 133, 192)"
                  icon="TableOutlined"
                  :title="t('data view')"
                  @click="go('/analysis/data')"
                >
                </quick>
              </a-col>
              <a-col :span="8">
                <quick
                  color="rgb(149, 222, 100)"
                  icon="PayCircleOutlined"
                  :title="t('cost report')"
                  @click="go('/cost/search')"
                >
                </quick>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
 

      </a-row>
    </page-layout>
    <page-footer></page-footer>
  </div>
</template>
<script>
import { computed } from "vue";
import { useI18n } from "vue-i18n";
import { SmileTwoTone } from "@ant-design/icons-vue";
import { useRoute, useRouter } from "vue-router"; 
export default {
  components: {
    SmileTwoTone, 
  },
  setup() {
    const { t } = useI18n();
    const router = useRouter();
    const userInfo = computed(
      () => JSON.parse(localStorage.getItem("USER_INFO")).username
    );
    const go = async (e) => {
      router.push(e);
    };
    return {
      userInfo,
      t,
      go,
    };
  },
};
</script>
<style lang="less" scoped> 

</style>
